<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  </head>
  <body>
    <div id="app">
      <!-- View -->
      <login></login>
      <hr />
      <login></login>
      <hr />
      <login></login>
    </div>

    <script>
      // 组件的作用：复用

      // 定义组件（全局组件）
      /**
       * 参数1：组件的名字
       * 参数2：组件的实例
       */
      Vue.component('login', {
        template: `
            <div>
                <p>用户名：<input v-model="username" /></p>
                <p>密码：<input v-model="password" /></p>
                <button @click="login">登录</button>
            </div>
        `,
        // model
        // data: {
        //   username: '',
        //   password: ''
        // },
        data() {
          return {
            username: '',
            password: ''
          }
        },
        methods: {
          login() {
            console.log(this.username, this.password)
          }
        }
      })

      // ViewModel
      // 我们以后开发vue项目，一个项目中，只会有一个根实例
      new Vue({
        el: '#app',
        data: {} // 一个项目中，只会有一个根实例，所以data写成对象没问题
      })
    </script>
  </body>
</html>
